<template>
  <div class="zf">
    <van-nav-bar left-text="支付成功" left-arrow />
    <div class="zfBox">
      <div class="item">
        <img src="../../assets/success.png" alt="" />
        <div class="itemprice">
          <p>支付成功！</p>
          <p style="font-size: 22px">￥2308.00</p>
        </div>
      </div>
      <van-divider dashed />
      <div class="item1">
        <p>订单编号：84738193757421928491</p>
        <p>订单编号：84738193757421928491</p>
        <p>支付方式：支付宝支付</p>
      </div>
    </div>
  </div>
  <div class="butt">
    <button class="btn1">查看订单</button>
    <button class="btn2">返回首页</button>
  </div>
</template>

<script setup></script>

<style scoped>
.zf {
  line-height: 30px;
}
.van-nav-bar {
  --van-nav-bar-icon-color: #000;
  --van-nav-bar-text-color: #000;
}
.van-divider {
  --van-divider-line-height: 34px;
  margin-top: 50px;
}
.zfBox {
  width: 390px;
  height: 409px;
  line-height: 20px;
  border-radius: 0px 0px 24px 24px;
  background-color: rgba(0, 161, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  padding: 70px 40px;
  box-sizing: border-box;
}
.item {
  display: flex;
}
.item .itemprice {
  margin-left: 20px;
  line-height: 35px;
}
.item img,
.item .itemprice {
  width: 94px;
  height: 73px;
}
.itemprice p {
  color: rgb(255, 255, 255);
  font-size: 18px;
}
.item1 {
  margin-top: 30px;
  line-height: 30px;
  margin-left: 10px;
}
.item1 p {
  color: rgb(255, 255, 255);
  font-size: 14px;
  text-align: left;
}
.butt{
    margin-top: 50px;
}
.btn1,
.btn2 {
  width: 300px;
  height: 44px;
  line-height: 23px;
  border-radius: 32px;
  font-size: 16px;
  text-align: center;
  border: 0;
  margin-left: 45px;
  margin-top: 20px;
  font-weight: bold;
}
.btn1 {
  background-color: rgba(0, 161, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.btn2 {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(0, 161, 255, 1);
  border: 1px solid rgba(0, 161, 255, 1);
}
</style>
